<template lang="">
  <div>
    <!-- 分割线 -->
    <el-divider content-position="left">{{data.title}}</el-divider>
    <div class="timeBox">
      <span v-if="data.create_time" class="timer"><i class="el-icon-alarm-clock"></i>{{data.create_time}}</span>
      <span><i class="el-icon-view"></i>{{data.visited}}</span>
    </div>
    <!-- 具体文章内容 -->
    <div class="detail">
      <!-- //编辑器 -->
      <div class="bodyFont clearfloat" id="bodyFont" ref="bodyFont" :class="{bodyHeight:contentStatus}">
        <mavon-editor v-model="data.content" :ishljs="true" defaultOpen="preview" :toolbarsFlag="false"
          :subfield="false" codeStyle="atom-one-dark" :boxShadow="false">
        </mavon-editor>
      </div>
      <div class="contentToggle" v-if="contentStatus" @click="contentStatus=!contentStatus">点击阅读全文<i><svg
            t="1633502848140" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
            p-id="1389" width="16" height="16">
            <path d="M185.884 327.55 146.3 367.133 512.021 732.779 877.7 367.133 838.117 327.55 511.997 653.676Z"
              p-id="1390" fill="#d81e06"></path>
          </svg></i></div>
    </div>
  </div>

</template>
<script>
    export default {
        props: ['data'],
        data() {
            return {
                contentStatus: false,
                curHeight: 0,
                bodyHeight: 30
            }
        },
        mounted() {
            setTimeout(() => {
                this.contentToggle();
            }, 500)
        },
        methods: {
            contentToggle() {
                this.curHeight = this.$refs.bodyFont.offsetHeight;
                console.log(this.curHeight);
                if (this.curHeight > this.bodyHeight) {
                    this.contentStatus = true;
                } else {
                    this.contentStatus = false;
                }
            },
        }
    }
</script>
<style lang="less">
    .timer {
        margin-right: 15px;
    }
    
    i {
        margin-right: 5px;
    }
    
    .detail {
        margin-top: 20px;
    }
    
    .el-divider__text,
    .el-link {
        font-size: 25px;
        font-weight: 550;
    }
    
    .bodyFont {
        color: #333;
        text-align: left;
        line-height: 58px;
        word-break: break-all;
        word-wrap: break-word;
        padding-bottom: 30px;
        height: auto;
        overflow: hidden;
        max-height: 100%;
        p {
            margin: 16px 0 0 0;
        }
    }
    
    .bodyHeight {
        height: 100px;
    }
    
    .contentToggle {
        height: 60px;
        line-height: 60px;
        text-align: center;
        color: red;
        cursor: pointer;
    }
</style>